<template>
  <div class="service-pending-box">
    <!-- 标题 -->
    <mu-base-title title="服务记录" />
    <!-- 表格 -->
    <mu-base-table :columnData="columnData" :tableData="servicesData" :total="total" v-model:page-data="pageData">
      <template #toolbar>
        <!-- 搜索表单 -->
        <mu-search-form v-model:form-data="formData" :state-data="stateData" @searchSigns="searchServices"
          style="margin-top: 40px;" title="服务" :is-have-name="false" />
      </template>
      <template #state="{ row }">
        <span :style="{ color: stateData.find(item => item.value == row.state)?.color }" style="font-weight: 600;">
          {{stateData.find(item => item.value == row.state)?.label}}
        </span>
      </template>
      <template #effectiveDate="{ row }">
        <span>{{ new Date(row.effectiveDate).toLocaleString() }}</span>
      </template>
      <template #handle="{ row }">
        <router-link :to="`/service/detail/${JSON.stringify({ _id: row._id, btnName: 'none' })}`">
          <el-button link style="color: var(--el-color-primary);">查看详情</el-button>
        </router-link>
      </template>
    </mu-base-table>
  </div>
</template>

<script setup lang="ts">
import { searchServicesApi } from '@/api/serviceManage';
import { onMounted, ref, watch } from 'vue';

const stateData = [
  { label: '已驳回', value: '0', color: '#FA7674' },
  { label: '生效中', value: '3', color: '#6C76F4' },
  { label: '已过期', value: '4', color: '#999999' }
];

const formData: any = ref({});

const columnData = ref<columnDataType[]>([
  { label: '', prop: '', width: 55, settings: { type: 'selection' } },
  { label: '编号', prop: '_id', align: 'center', settings: { 'min-width': 120 } },
  { label: '姓名', prop: 'residentId.name', align: 'center' },
  { label: '身份证号', prop: 'residentId.IDnumber', align: 'center', settings: { 'min-width': 120 } },
  { label: '手机号码', prop: 'residentId.phone', align: 'center' },
  { label: '服务包', prop: 'servicePackId.name', align: 'center' },
  { label: '服务项目', prop: 'servicePackId.serviceItemIds[0].name', align: 'center' },
  { label: '服务医生', prop: 'doctorId.name', align: 'center', settings: { 'min-width': 120 } },
  { label: '服务状态', prop: 'state', align: 'center' },
  { label: '申请时间', prop: 'time', align: 'center' },
  { label: '操作', prop: 'handle', align: 'center' },
]);

const servicesData = ref([]);

const total = ref(0);

const pageData = ref({
  currentPage: 1,
  pageSize: 5,
});



watch(pageData, () => {
  searchServices();
}, { deep: true });



onMounted(() => {
  searchServices();
})



const searchServices = async () => {
  const res = await searchServicesApi({
    type: 'done',
    ...pageData.value,
    ...formData.value
  });
  // console.log(res);
  if (res.code == 200) {
    servicesData.value = res.data.rows;
    total.value = res.data.total;
  }
}
</script>

<style scoped lang="scss"></style>